import { createApp } from 'vue';
import ImportModal from './main.vue';

const modalInstance = (options) => {
  // 创建元素节点
  const rootNode = document.createElement('div');

  // 在body标签内部插入此元素
  document.body.appendChild(rootNode);
  // 创建应用实例（第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props）
  const app = createApp(ImportModal, {
    ...options,
    hide() {
      // 卸载已挂载的应用实例
      app.unmount();
      // 删除rootNode节点
      document.body.removeChild(rootNode);
    },
  });
  // 将应用实例挂载到创建的 DOM 元素上
  return app.mount(rootNode);
};
// 注册插件app.use()会自动执行install函数
modalInstance.install = (app) => {
  // 注册全局属性，类似于 Vue2 的 Vue.prototype
  app.config.globalProperties.$modalInstance = (options) => modalInstance(options).showModal();
};
// 定义show方法用于直接调用
modalInstance.showModal = (options) => modalInstance(options).showModal();
export default modalInstance;
